import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon, AtInput, AtTextarea} from "taro-ui";
import {Image, Picker, Text, View} from "@tarojs/components";
import {
  TARO_ENV,
  CONSULTATION_ADD
} from '../../constants/api';
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";
import {h5Wx} from '../../utils/h5.service';
import './index.scss'
import {newHttp} from "../../utils/request";

type PageState = {
  form: any
}

export default class ProductInfo extends Component {
  state: PageState = {
    form: {
      name: '',
      phone: '',
      play_begin: '',
      play_end: '',
      adult_travel: 0,
      children_travel: 0,
      capita_budget: '',
      demand: '',
    }
  }

  async UNSAFE_componentWillMount() {
    await vcmonitor(this)
    if (TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
  }

  async componentDidMount() {}

  handleChange(field, val ) {
    const {form} = this.state
    if (field == 'capita_budget') {
      if (!Number(val)) {
        val = 0
      }
      // val = Number(val).toFixed(2)
     val = parseInt(val)
    }
    form[field] = val
    this.setState({form})
  }

  async save() {
    const {form} = this.state
    const data = await newHttp.catchPost(CONSULTATION_ADD, form)
    if (data === false) {
      Taro.showToast({
        title: data.message,
        icon: 'none',
        mask: true,
        duration: 20000
      });
    } else {
      Taro.showToast({
        title: '提交成功！',
        icon: 'none',
        mask: true,
      });
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.navigateBack({
          delta: 1
        })
        /*Taro.switchTab({url: '/pages/index/index'})*/
      }, 1000)
    }
  }

  addSet(type) {
    const {form} = this.state
    form[type] ++
    this.setState({form})
  }

  delSet(type) {
    const {form} = this.state
    form[type] --
    if (form[type] < 0) {
      form[type] = 0
    }
    this.setState({form})
  }

  today = this.getDateInfoDate()
  getDateInfoDate() {
    const date = new Date()
    const y = date.getFullYear()
    let MM = date.getMonth() + 1
    MM = MM < 10 ? ('0' + MM) : MM
    let d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    let h = date.getHours()
    h = h < 10 ? ('0' + h) : h
    let m = date.getMinutes()
    m = m < 10 ? ('0' + m) : m
    let s = date.getSeconds()
    s = s < 10 ? ('0' + s) : s
    return y + '-' + MM + '-' + d
  }

  render() {
    const {
      form
    } = this.state
    return (
      <View className={`product-info ${process.env.TARO_ENV == 'h5' ? '' : 'product-info-weapp'}`}>
        <GzhAuth />
        <View className='product-info-form'>
          <View className='item'>
            <AtInput
              className='require'
              name='name'
              title='姓名：'
              type='text'
              placeholder='请输入您的姓名或称呼'
              value={form.name}
              border={false}
              maxLength={15}
              onChange={this.handleChange.bind(this, 'name')}
            />
          </View>
          <View className='item'>
            <AtInput
              className='require'
              name='name'
              title='联系方式：'
              type='text'
              placeholder='请输入您联系方式'
              value={form.phone}
              border={false}
              maxLength={11}
              onChange={this.handleChange.bind(this, 'phone')}
            />
          </View>
          <View className='item require-item-one'>
            <Picker className='parade-date' mode='date' start={this.today}
              onChange={({detail: {value}}) => this.handleChange('play_begin', value)} value={form.play_begin}
            >
              <View className='product-form-block-item border-bottom'>
                <View className='product-form-block-item-left'>
                  游玩日期：
                </View>
                <View className='product-form-block-item-right'>
                  {!form.play_begin && <View className='mepty mepty-color'>
                    出行日期
                  </View>}
                  {form.play_begin && <View className='value'>
                    {form.play_begin}
                  </View>}
                </View>
              </View>
            </Picker>
            <View className='parade-line'>—</View>
            <Picker className='parade-date parade-date-back' mode='date' start={this.today}
              onChange={({detail: {value}}) => this.handleChange('play_end', value)} value={form.play_end}
            >
              <View className='product-form-block-item border-bottom'>
                <View className='product-form-block-item-right'>
                  {!form.play_end && <View className='mepty mepty-color'>
                    返程日期
                  </View>}
                  {form.play_end && <View className='value'>
                    {form.play_end}
                  </View>}
                </View>
              </View>
            </Picker>
          </View>
          <View className='item-trips border-bottom require-item-one' >
            <View className='weight-title'>出行人数：</View>
            <View className='trips'>
              <View className='trips-item'>
                <Text>成人</Text>
                <View className='trips-number'>
                  <View className='trips-number-left' onClick={() => this.delSet('adult_travel')}>
                    <AtIcon value='subtract-circle' size='24' color='#ffbc43' />
                  </View>
                  <Text className='trips-number-text'>{form.adult_travel}</Text>
                  <View className='trips-number-right' onClick={() => this.addSet('adult_travel')}>
                    <AtIcon value='add-circle' size='24' color='#ffbc43' />
                  </View>
                </View>
              </View>
              <View className='trips-item last'>
                <Text>儿童</Text>
                <View className='trips-number'>
                  <View className='trips-number-left' onClick={() => this.delSet('children_travel')}>
                    <AtIcon value='subtract-circle' size='24' color='#ffbc43' />
                  </View>
                  <Text className='trips-number-text'>{form.children_travel}</Text>
                  <View className='trips-number-right' onClick={() => this.addSet('children_travel')}>
                    <AtIcon value='add-circle' size='24' color='#ffbc43' />
                  </View>
                </View>
              </View>
            </View>
          </View>

          <View className='require-item item'>
            <AtInput
              className='proportion-after item-right'
              name='site_fee'
              title='人均预算：'
              placeholder='请输入人均预算'
              maxLength={10}
              value={form.capita_budget}
              onBlur={this.handleChange.bind(this, 'capita_budget')}
            />
          </View>
          <View className='border-bottom weight-title require-item-one'>游玩需求：</View>
          <AtTextarea value={form.demand} maxLength={500} onChange={this.handleChange.bind(this, 'demand')}
            placeholder='写下您游玩的详细需求，我们会为您解答。'
            count={false}
            placeholderClass='placeholderClass'
          />
        </View>
        <View className='lineform-image' style='display: flex'>
          <Image className='linform-logo'
            mode='widthFix'
            src='https://resource.ivcheng.com/upload/2022/08/18/31171b6e7d4d499da83c69683e952788.png'
          />
        </View>
        <View className='foot-btn'>
          <View className={`${TARO_ENV === 'h5' ? "btn h5-small active" : "btn active"}`}
            onClick={() => this.save()}
          >提交需求</View>
        </View>
      </View>
    )
  }
}
